<template>
  <div class="chooseRole">
    <cpro-public title="选择招募角色" :showStat="true">
      <template v-slot:content>
        <template v-for="(item, index) in rolesDescribe" :key="index">
          <el-button :class="{ active: isActive === index, role: true }" @click="getRole(index)"
            >{{ item?.role }}
          </el-button>
        </template>
      </template>
    </cpro-public>
  </div>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import { ref, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
interface describeRole {
  role: string
}
type propRole = {
  rolesDescribe: Array<describeRole>
}
defineProps<propRole>()
const emit = defineEmits(['updateRole'])
const isActive = ref<number>(-1) // 用于记录当前激活的角色索引
const zmArr: Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']

// 得到用户选择的角色，并存储
const getRole = (index: number) => {
  isActive.value = index // 直接设置当前激活的角色
  updateRole()
}

const updateRole = (): void => {
  if (isActive.value !== -1) {
    const role: string = zmArr[isActive.value]
    emit('updateRole', role)
  }
}

const vailDate = (): Boolean => {
  if (isActive.value === -1) {
    ElMessage({
      showClose: true,
      message: '请选择招募角色',
      type: 'error'
    })
    return true
  }
  return false
}
defineExpose({ vailDate })
</script>

<style lang="less" scoped>
.chooseRole {
  margin-top: -25px;
  .active {
    background-color: var(--el-button-hover-text-color);
    color: white;
  }
  .role {
    width: 126px;
    height: 35px;
    line-height: 35px;
    margin: 6px 20px 6px 8px;
    font-size: 14px;
  }
}
</style>
